<!-- Student_FreeCourseVideo.html -->
<!DOCTYPE HTML>
<html manifest="view.appcache">
    <head>
        <meta charset="utf-8" >
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="telephone=no" />
        <title>视频播放</title>
        <link rel="stylesheet" type="text/css" href="../../css/api.css" />
        <link rel="stylesheet" type="text/css" href="../../css/skin.css" />
        <link rel="stylesheet" type="text/css" href="../../css/common.css" />
        <style type="text/css">
            #vcontainer {
                width: 100%;
                height: 260px;
                background-color: #101010;
            }
            .video {
                width: 100%;
                display: block;
            }
            #header {
                color: white;
                z-index: 999;
                filter:alpha(opacity=80);   
                -moz-opacity:0.8;   
                -khtml-opacity: 0.8;   
                opacity: 0.8;
            }
            #nav {
                display: -webkit-box;
                height: 44px;
                background-color: #323334;
            }
            #left {
                width: 44px;
                color: #fff;
                background: url(../../image/navbtn_back.png) no-repeat 14px 12px;
                -webkit-background-size: 12px 20px;
                z-index: 999;
                position: relative;
                line-height: 44px;
                margin-left: 0px;
            }
    
            #middle {
                -webkit-box-flex: 1;
                width: 100%;
                display: -webkit-box;
                -webkit-box-pack: center;
                -webkit-box-align: center;
            }
            #title {
                font-size: 18px;
                text-align: center;
                color: #fff;
            }
            #right {
                width: 54px;
                line-height: 44px;
                margin-right: 10px;
            }
        </style>

    </head>
    <body>
        <div id="main">
            
            <div id="vcontainer" data-video="">
                <div id="header">
                    <nav id="nav">
                    <!-- <img id='returnImg' src="../../image/returnVideo.png" alt=""> -->
                        <a id="left" tapmode=""><img src="../../image/icon_jiantou.png" alt="" style="width: 12px;"></a>
                        <div id="middle">
                            <strong id="title"></strong>
                        </div>
                        <!-- <img id='downLoadImg' src="../../image/downLoadVideo.png" alt=""> -->
                        <a id="right"><!-- 学过了 --></a>
                        <!-- <a id="right"><img src="../../image/downLoadVideo.png" alt="" id='downLoadImg'></a> -->
                    </nav>
                </div>
                <!-- <img src="../../image/default.png" id="videoImg" alt="" height="260" width="100%"> -->
            </div>
        </div>
    </body>
    <script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/requestTool.js"></script>
    <script type="text/javascript" src="../../script/zepto.video.js"></script>
    <script type="text/javascript" src="../../script/vplayer.js"></script>
    <script type="text/javascript" src="../../script/study_courseTimeRecord.js"></script>
    <script type="text/javascript">
        var dataFunType = '0';
        var videoUrl ;
        var uid;
        var jid;
        apiready = function() {
            prepareData();
            // 获取视频url和存储名称
            var getParam = api.pageParam;
            videoUrl = getParam.videourl;
            var type=videoUrl.indexOf("http://");
            var type1=videoUrl.indexOf("https://");
            if(type<0 && type1<0){
                 var systemType = api.systemType;
                  if (systemType == 'ios') {
                      var pashUrl = getParam.videourl;
                      var num = pashUrl.indexOf('/download');
                      var vurl = pashUrl.substring(num);
                      videoUrl = api.cacheDir + vurl;
                  }
            }
            var videoLocalName = getParam.videoname;
            var currentTime = 0;
            var v = $('#vcontainer').VPlayer({
                vURL : videoUrl,
                title : videoLocalName,
                loop : 1, // 播放次数
                autoPlay : true,
                // poster : getParam.imgurl, // 封面URL
                displayInline : true,
                controlAutoHide : true,
                controlHideDelay : 7000,
                backgroundColor : '#101010',
                isChecks: true//进度条是否可拖动
                // currentTime:currentTime,
                // vid:getParam.vid
            });
            api.addEventListener({
                name : 'pause'
            }, function(ret, err) {
                var video = $('#videoPlay')[0];
                setTimeout(function() {
                    video.pause();
                }, 500);
            })
            api.addEventListener({
                name : 'resume'
            }, function(ret, err) {
                var video = $('#videoPlay')[0];
                setTimeout(function() {
                    video.play();
                }, 500);
            })
            api.addEventListener({
                name : 'viewdisappear'
            }, function(ret, err) {
                var video = $('#videoPlay')[0];
                setTimeout(function() {
                    video.pause();
                }, 500);
            })
            // 修改标题名称
            $api.text($api.dom('#title'), videoLocalName);
            // $api.fixStatusBar($api.dom('#header'));
            if (!$(".controllBar .icon-quanping").hasClass('icon-quanping')) {
                    $(".icon-suoxiao").trigger("tap");
                } 
            else {
                // $api.fixStatusBar($api.dom('#header'));
                //关闭当前窗口，使用默认动画
                // api.closeWin();
            }
            $api.addEvt($api.dom('#left'), 'click', function(){
                if (!$(".controllBar .icon-quanping").hasClass('icon-quanping')) {
                    $(".icon-suoxiao").trigger("tap");
                } else {
                    // 旋转屏幕至竖屏
                    api.setScreenOrientation({orientation:'portrait_up'});
                    // 取消全屏
                    api.setFullScreen({fullScreen:false});
                    //关闭当前窗口，使用默认动画
                    api.closeWin();
                }
            });
            
            api.addEventListener({
                name : 'keyback'
            }, function(ret, err) {
                if (!$(".controllBar .icon-quanping").hasClass('icon-quanping')) {
                    $(".icon-suoxiao").trigger("tap");
                } else {
                    // 旋转屏幕至竖屏
                    api.setScreenOrientation({orientation:'portrait_up'});
                    // 取消全屏
                    api.setFullScreen({fullScreen:false});
                    //关闭当前窗口，使用默认动`画
                    api.closeWin();
                }
            })
        }
        function prepareData(){
            uid = $api.getStorage('cfnetppuid');
            jid = $api.getStorage('cfnetppjxid');
        }
    </script>
</html>